<template>
    <div>
        <div class="appAlert" style="display: none;">
            <div class="down-black" @click="hideBord"></div>
            <div class="black_txt">
                <img :src="staticImageUrl('/images/jiantou.png')" style="z-index: 10">
                <p style="color: #fff;padding: 15px;font-size: 20px">点击右上角，在浏览器中打开</p>
            </div>
        </div>
        <div class="mindex-wrap positionR">
            <!--<div class="down-wbtn top-btn width-full">-->
                <!--<div class="down-btn" @click="toDownload">立即下载</div>-->
            <!--</div>-->
            <img class="displayBlock first-img" :src="staticImageUrl('images/index/hkhw_m_index_pic1.jpg')" alt="">
            <img class="displayBlock second-img" :src="staticImageUrl('images/index/hkhw_m_index_pic2.png')" alt="">
            <div class="down-wbtn bottom-btn width-full displayFlex flexCenter flex-wrap">
                <div class="down-btn" @click="toDownload">立即下载</div>
                <div class="down-btn" v-if="!isIphone"  @click="toDownload" style="margin-top: .2rem">
                    无法下载?<a href="https://download.haokanhaowan.cn/android/好看好玩.apk" download="好看好玩">点这里</a>
                </div>
            </div>
            <div class="m-copy-right">
                <copy-right></copy-right>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MIndex",
        data(){
            return{
                secondImg:this.staticImageUrl('images/index/os_m_index_pic_2.png'),
            }
        },
        mounted(){
        },
        methods:{
            hideBord(){
                $('.appAlert').hide();
            },
            toDownload() {
                var u = navigator.userAgent, app = navigator.appVersion;
                if (this.isAndroid) {
                    window.location.href = process.env.ANDROID_HKHW_URL_SCHEMES ;
                    if(this.v_is_weixin || this.v_is_qq){
                        /*判断是否可以打开app,如果不行直接下载好看好玩*/
                        setTimeout(()=>{
                            $('.appAlert').show();
                            // document.location = "https://a.app.qq.com/o/simple.jsp?pkgname=com.yibaotong.nvwa";
                            // document.location = "https://download.haokanhaowan.cn/android/好看好玩.apk";
                        },1500)
                    }else{
                        setTimeout(()=>{
                            document.location = "https://download.haokanhaowan.cn/android/好看好玩.apk";
                        },1500)
                    }
                } else if (this.isIphone) {
                    /*直接去appStore里面打开好看好玩*/
                    document.location = "https://apps.apple.com/cn/app/%E5%A5%BD%E7%9C%8B%E5%A5%BD%E7%8E%A9/id1467721115";
                }
            },
        },
        components:{
            'copy-right':()=>import('./components/copyRight'),
            'v-bord': () => import('../../components/commonComponents/alert/Bord'),
        }
    }
</script>

<style scoped lang="scss">
    .mindex-wrap{
        width: 100%;
    }
    .down-wbtn{
        position: absolute;
        left: 0;
        height: 1.2rem;
        top: 3rem;
        text-align: center;
        z-index: 1;
        font-size: .24rem;
        color: #fff;
    }
    .down-btn{
        display: inline-block;
        border: .02rem solid #00ffff;
        border-radius: .25rem;
        width: 2.7rem;
        height: .5rem;
        line-height: .46rem;
        box-sizing: border-box;
    }
    .bottom-btn{
        top: auto;
        bottom: 1.6rem;
    }
    .first-img{
        width: 100%;
    }
    .second-img{
        width: 100%;
    }
    .appAlert{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 9;
    }
    .down-black{
        width: 100%;
        height:100vh;
        background: #000;
        position: relative;
        z-index: 9;
        opacity: 0.5;
    }
    .black_txt{
        width:100%;
        text-align:right;
        right: 8%;
        top: 0;
        z-index: 10;
        position: fixed;
    }
    .m-copy-right{
        height: .6rem;
        position: absolute;
        left: 0;
        text-align: center;
        bottom: 0;
        width: 100%;
    }
    .m-copy-right /deep/{
        .about{
            font-size: .14rem;
            margin: 0;
            a{
                color: #fff;
                padding: 0 .1rem;
            }
        }

        .about a:last-of-type{
            border-right: none;
        }
        .footer-content{
            text-align: center;
            font-size: .12rem;
            color: #fff;
            a{
                padding: 0 .1rem;
            }
        }
        .copy-right-text{
            color: #fff;
        }
        #government{
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: .7rem;
        }
    }
</style>